<template>
  <div class="box">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-button @click="Inquire">查询</el-button>
    <Echars :xData="xData" :yData="yData"></Echars>
  </div>
</template>

<script>
import { ordertotalReq } from "@/api/sale.api";
import dayjs from "dayjs";
import Echars from "@/components/echars/Echars.vue";
export default {
  components: { Echars },
  data() {
    return {
      xData: [],
      yData: [
        {
          name: "订单量",
          data: [],
        },
      ],
      date: [],
    };
  },

    methods: {
    Inquire() {
      if (this.date !== null) {
        if (this.date.length !== 0) {
          console.log(this.date);
          let date = JSON.stringify(
            this.date.map((item) => dayjs(item).format("YYYY-MM-DD HH:mm:ss"))
          );
          ordertotalReq(date).then((res) => {
            this.xData = res.data.data.map((item) =>
              dayjs(item.orderTime).format("MM-DD HH:mm:ss")
            );
            this.yData[0].data = res.data.data.map((item) => item.orderAmount);
          });
        } else {
          this.$message.error("请输入查询时间后再查询");
        }
      } else {
        this.$message.error("请输入查询时间后再查询");
      }
    },
  },

  created() {
    ordertotalReq().then((res) => {
      //   console.log(res);
      this.xData = res.data.data.map((item) =>
        dayjs(item.orderTime).format("MM-DD HH:mm:ss")
      );
      this.yData[0].data = res.data.data.map((item) => item.orderAmount);
      //   console.log(this.xData);
      //   console.log(this.yData);
    });
  },
};
</script>

<style lang="less" scoped>
.box{
    width: 100%;
    height: 100%;
}
</style>